<?php
// -----------------------------------------------------------------------------
// include
// -----------------------------------------------------------------------------

include "config/config.php";
include "auth.php";
include "DBManager.php";

// -----------------------------------------------------------------------------
// 访问设置
// -----------------------------------------------------------------------------

if (!isset($_GET['date'])) {
    exit("需要传入有效的参数。");
}

$date = $_GET['date'];

// -----------------------------------------------------------------------------
?>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>Todo - 已办事项</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="resources/bootstrap-5.2.0-beta1-dist/css/bootstrap.min.css">
</head>
<body>

<!-- ----------------------------------------------------------------------- -->

<script src="resources/bootstrap-5.2.0-beta1-dist/js/bootstrap.min.js"></script>
<script src="resources/jQuery/jquery-3.5.1.js"></script>
<?php include "globalNavbar.php"; ?>

<!-- ----------------------------------------------------------------------- -->

<!--div container start-->
<div class="container container-fluid mt-3 mb-5">

    <!-- 导航栏 开始 -->
    <div class="mt-3">
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a class="text-decoration-none" href="<?php echo $homepage; ?>">首页</a></li>
                <li class="breadcrumb-item active">已办事项 - <?php echo $date; ?></li>
            </ol>
        </nav>
    </div>
    <!-- 导航栏 结束 -->

    <div id="list"></div>

</div>
<!--div container end-->

<!-- ----------------------------------------------------------------------- -->

<!-- Modal 确认删除 开始 -->
<div class="modal fade" id="modalConfirmDelete" data-bs-backdrop="true" data-bs-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">确定要删除吗？当前条目：<span id="itemToDelete" class="text-info text-break"></span></h1>
                <button type="button" id="btnCloseModalConfirmDelete" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <p>此操作<span class="text-danger">无法撤销</span>，请谨慎选择。</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
                <button id="btnConfirmDelete" type="button" class="btn btn-outline-primary">确定</button>
            </div>

        </div>
    </div>
</div>
<!-- Modal 确认删除 结束 -->

<!-- ----------------------------------------------------------------------- -->
<script src="resources/jQuery/jquery-3.5.1.js"></script>
<script src="resources/base64/functions.js"></script>
<!-- ----------------------------------------------------------------------- -->

<!--全局变量-->
<script>
    let finishedTasksJsonString = ""
    let itemToDelete = ""
    let date = `<?php echo $date; ?>`
</script>

<!-- ----------------------------------------------------------------------- -->

<!--函数定义-->
<script>

    // 从数据库中读取指定日期内的「已完成的事务」
    function readFromFinished(date) {

        var url = "ajax/readFromFinished.php?date=" + date

        $.get({
            url: url,
            async: false
        })
            .done(function( data ) {
                finishedTasksJsonString = data
            })
            .fail(function () {
                alert("请求失败。")
            });

    }

    // 向数据库中写入指定日期内的「已完成的事务」
    function writeToFinished(content, date) {

        var url = "ajax/writeToFinished.php"

        $.post({
            url: url,
            data: {content: content, date: date},
            async: false
        })
            .done(function () {
                getLists()
            })
            .fail(function () {
                alert("请求失败。")
            })

    }

    function getLists() {

        var url = `ajax/generateListOfFinishedTasks.php?date=${date}`

        $.get({
            url: url,
            async: false
        })
            .done(function( data ) {
                $("#list").html(data)
            })
            .fail(function () {
                alert("请求失败。")
            });

    }

</script>

<!-- ----------------------------------------------------------------------- -->

<!--网页加载时执行-->
<script>
    getLists()
</script>

<!-- ----------------------------------------------------------------------- -->

<!--事件处理-->
<script>

    $(document).on("click", ".btnDeleteItem", function (e) {

        itemToDelete = $(this).children().last().text()
        $("#itemToDelete").html(itemToDelete)

        const myModal = new bootstrap.Modal($("#modalConfirmDelete"), {
            backdrop: true,
            keyboard: true
        })
        myModal.show()

    })

    $("#btnConfirmDelete").on("click", function (e) {

        /* close modal */

        $("#btnCloseModalConfirmDelete").click()

        /* json string to arr */

        readFromFinished(date)
        finishedTasksJsonString = b64_to_utf8(finishedTasksJsonString)
        let finishedTasks = JSON.parse(finishedTasksJsonString)

        /* delete item */

        let index = finishedTasks.indexOf(itemToDelete)
        finishedTasks.splice(index, 1)

        // arr to json string

        finishedTasksJsonString = JSON.stringify(finishedTasks)
        finishedTasksJsonString = utf8_to_b64(finishedTasksJsonString)

        /* save */

        writeToFinished(finishedTasksJsonString, date)

    })

</script>

<!-- ----------------------------------------------------------------------- -->

<!-- 添加「返回顶部按钮」 -->
<script src="resources/vanilla-back-to-top/index.js"></script>
<script src="resources/vanilla-back-to-top/config.js"></script>

<!-- ----------------------------------------------------------------------- -->

</body>
</html>


